<!doctype html>
<html>
<head>
	<title>My Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
	<script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
	<script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
	<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
	<script type="text/javascript" src="js/jqplot.enhancedLegendRenderer.min.js"></script>
	<script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>
</head>
<body>
	<div data-role="page">

		<div data-role="header">
			<h1 id="title"></h1>
		</div>
		<!-- /header -->

		<div data-role="content">
            <div id="chart1"></div>
            <div id="chart2"></div>
        </div><!-- /content -->

		<div data-role="footer">
			<h4></h4>
		</div>
		<!-- /footer -->

	</div>
	<!-- /page -->

	<script>
		//$(document).ready(function() {
			//$("#content").html(window.dataObject.getDataJson());
		//});

		$(document).ready(function() {

			$.jqplot.config.enablePlugins = true;
			
			window.dataObject.getDataJson();

			var s1 = [ 1, 4, 2, 6 ];
			var s2 = [ 2, 3, 1, 5 ];
			var s3 = [ 3, 2, 1, 5 ];
			var s4 = [ 5, 2, 3, 1 ];
			var data = [ s1, s2, s3, s4 ];
			var labelDefine = [ '吃的次数', '尿的次数', '睡觉的时间', '拉的次数' ];
			var ticks = [ '13-08-19', '13-08-20', '13-08-21', '13-08-22' ];
			var label1 = '过去' + s1.length + '天宝宝活动的次数记录';
			var label2 = '过去' + s1.length + '天宝宝活动的次数的趋势';
			// 需要的数据有以下4项：
			// 1. 4种动作对应的每天的数据
			// 2. 过去几天的日期字符串作为label
			// 3. 4种动作对应的label
			// 4. 总的图标的label
			
			var option1 = {
				title : label1,
				seriesDefaults : {
					renderer : $.jqplot.BarRenderer,
					pointLabels : {
						show : true
					},
					rendererOptions : {
						fillToZero : true
					}
				},
				legend : {
					renderer : $.jqplot.EnhancedLegendRenderer,
					show : true,
					labels : labelDefine,
					location : 's',
					placement : 'outsideGrid',
					rendererOptions : {
						numberRows : '1',
						numberColumns : data.length
					},
				},
				axes : {
					xaxis : {
						renderer : $.jqplot.CategoryAxisRenderer,
						ticks : ticks
					},
					yaxis : {
						tickOptions : {
							formatString : '%d'
						}
					}
				}
			};
			
			var option2 = {
			     title: label2,
			     legend: {
			          renderer: $.jqplot.EnhancedLegendRenderer,
			          show: true,
			          labels: labelDefine,
			          location : 's',
			          placement: 'outsideGrid',
			          rendererOptions: {
				          numberRows: '1',
				          numberColumns: data.length
				      },
			     },
			     axes: {
			         xaxis: {
			             renderer: $.jqplot.CategoryAxisRenderer,
		                 ticks: ticks
			         },
			         yaxis: {
			             tickOptions: {
			                 formatString: '%d'
			             }
			         }
			     }
			  }

			$.jqplot('chart1', data, option1);
			$.jqplot('chart2', data, option2);
		});
	</script>
</body>
</html>